<template>
  <div style="height:100%">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公众号菜单</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form :inline="true" class="user-search">
      <el-form-item label="请选择公众号">
        <el-select v-model="table.preview.id" placeholder="请选择公众号" @change="loadMenus">
          <el-option :label="item.name" :value="item.id"
                     v-for="(item, index) in enums.wxAccounts" :key="index"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-row :gutter="24" class="full-height" style="height:75%" v-if="table.preview.id">
      <el-col :span="1">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="11" style="border: 2px rgba(0,0,0,.1) solid; background-color: #f6f8f9;">
        <div class="custom-menu-view-con">
          <div class="custom-menu-view">
            <el-row :gutter="24" class="custom-menu-view__title" style="margin: 0">
              <el-col :span="3">
                <i class="el-icon-arrow-left"></i>
              </el-col>
              <el-col :span="18">{{getAccountInfoName(table.preview.id)}}</el-col>
              <el-col :span="3">
                <i class="el-icon-user"></i>
              </el-col>
            </el-row>
            <div class="custom-menu-view__body">
              <div class="weixin-msg-list">
                <ul class="msg-con"></ul>
              </div>
            </div>
            <div id="menuMain" class="custom-menu-view__footer">
              <div class="custom-menu-view__footer__left"></div>
              <div class="custom-menu-view__footer__right">


                <div class="grid-container">
                  <div class="custom-menu-view__menu" v-for="(item, index) in menus" :key="index"
                       @click="menuClickHandler(item)">
                    <div class="text-ellipsis">{{item.name}}</div>
                    <ul class="custom-menu-view__menu__sub">
                      <li class="custom-menu-view__menu__sub__add" v-for="(sub, subIndex) in item.sub_button"
                          :key="subIndex"
                          @click="subMenuClickHandler(sub, item)" @click.stop>
                        <div class="text-ellipsis">{{sub.name}}</div>
                      </li>
                      <li class="custom-menu-view__menu__sub__add" v-if="item.sub_button.length < 5" @click.stop>
                        <div class="text-ellipsis" @click="addSubMenu(item)">
                          <i class="el-icon-plus"></i>
                        </div>
                      </li>
                    </ul>
                  </div>
                  <div class="custom-menu-view__menu" v-if="menus.length < 3" @click="addMenu()">
                    <div class="text-ellipsis">
                      <i class="el-icon-plus"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="11"
              style="background-color: #f6f8f9;border-top: 2px rgba(0,0,0,.1) solid;border-right: 2px rgba(0,0,0,.1) solid;border-bottom: 2px rgba(0,0,0,.1) solid;border-left: 0px">
        <div class="cm-edit-after" v-if="currentMenuInfo">
          <div class="cm-edit-right-header b-b">
            <span id="cm-tit">新建菜单</span>
            <el-link class="pull-right" type="danger" @click="deleteVar()">删除</el-link>
          </div>
          <el-row>
            <el-form ref="form" :model="currentMenuInfo" label-width="80px" style="padding: 30px">
              <el-form-item label="菜单名称">
                <el-input v-model="currentMenuInfo.name"></el-input>
              </el-form-item>
              <el-row v-if="!currentMenuInfo.sub_button ||  !currentMenuInfo.sub_button.length > 0">
                <el-form-item label="特殊资源">
                  <el-radio-group v-model="currentMenuInfo.type">
                    <el-radio :label="'article_id'">发送消息</el-radio>
                    <el-radio :label="'view'">跳转网页</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-row class="cm-edit-page">
                  <el-row v-if="currentMenuInfo.type == 'view'">
                    <el-row>
                      <span style="font-size: 14px">粉丝点击该菜单会跳转到以下链接:</span>
                    </el-row>

                    <el-form-item label="页面地址">
                      <el-input v-model="currentMenuInfo.url"></el-input>
                    </el-form-item>
                  </el-row>
                  <el-row v-if="currentMenuInfo.type == 'article_id'">
                    <el-row>
                      <span style="font-size: 14px">选择您要发送的消息:</span>
                    </el-row>

                    <el-form-item label="我的资源">
                      <el-select v-model="currentMenuInfo.url"></el-select>
                    </el-form-item>
                  </el-row>
                </el-row>
              </el-row>
            </el-form>
          </el-row>
        </div>
      </el-col>
      <el-col :span="1">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
    <el-row class="cm-edit-footer" v-if="table.preview.id">
      <el-button type="primary" size="small" @click="saveJSON()">保存</el-button>
      <el-button type="primary" size="small" @click="deploy()">同步</el-button>
      <el-button type="primary" size="small" @click="toPreView">预览</el-button>
      <el-button type="primary" size="small">清空</el-button>
    </el-row>


    <div class="mobile_preview" v-if="preview">
      <div class="mobile_preview_hd">
        <strong class="nickname">{{table.preview.name}}</strong>
      </div>
      <div class="mobile_preview_bd">
        <ul id="viewShow" class="show_list"></ul>
      </div>
      <div class="mobile_preview_ft">
        <div class="grid-container-preview">
          <div class="custom-menu-view__menu" style="font-size: 10px"
               v-for="(item, index) in menus">
            <div class="text-ellipsis" @click="showSubMenus(item)">{{item.name}}</div>
            <ul class="custom-menu-view__menu__sub_view" v-if="item.subMenuShowAble">
              <li class="custom-menu-view__menu__sub__add" v-for="(sub, subIndex) in item.sub_button"
                  :key="subIndex"
                  @click="subMenuClickHandler(sub)" @click.stop>
                <div class="text-ellipsis">{{sub.name}}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <el-row style="text-align: center;">
        <el-button @click="cancelPreView">
          退出预览
        </el-button>
      </el-row>
    </div>
    <div class="mask" style="display: block;" v-if="preview">
      <div style="position: relative; left: 957px; top: 468px;">
        <div
          style="position: absolute; top: -2px; transform: translate3d(0px, 0px, 0px); animation: 1s linear -0.0833333s infinite normal none running opacity-100-25;">
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import Pagination from "../../../components/Pagination";
  import {wxAccountAll, wxMenuSave, wxMenus, wxMenuDeploy} from '../../../api/baseMG';

  export default {
    data() {
      return {
        table: {
          loading: false,
          currentAccount: {},
          preview: {},
          tableData: {}
        },
        menus: [],
        listData: [],
        enums: {
          wxAccounts: []
        },
        currentMenuInfo: null,
        currentTopMenu: null,
        preview: false,
      }
    },
    created() {
      this.loadAllAccount();
    },
    // 注册组件
    components: {
      Pagination
    },
    methods: {
      deploy() {
        wxMenuDeploy(this.table.preview.id).then(res => {
          console.log(121)
          this.$message({
            type: 'success',
            message: res.msg
          })

        }).catch(e => {

        })
      },
      saveJSON() {
        wxMenuSave({menuJson: JSON.stringify({button: this.menus}), wxAccountId: this.table.preview.id}).then(res => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: res.msg
            })
          }
        });
      },
      showSubMenus(item) {
        for (const menu of this.menus) {
          menu.subMenuShowAble = false;
        }
        item.subMenuShowAble = true;
      },
      getAccountInfoName(id) {
        for (const wxAccount of this.enums.wxAccounts) {
          if (wxAccount.id == id) {
            this.table.preview.name = wxAccount.name;
            return this.table.preview.name;
          }
        }
      },
      toPreView() {
        if (this.getAccountInfoName(this.table.preview.id)) {
          this.preview = true;
        }
      },
      cancelPreView() {
        this.preview = false;
      },
      menuClickHandler(menu) {
        this.currentMenuInfo = menu;
      },
      subMenuClickHandler(subMenu, topMenu) {
        this.currentMenuInfo = subMenu;
        this.currentTopMenu = topMenu;

      },
      addMenu() {
        this.menus.push(
          {
            name: "新建菜单",
            level: 1,
            subMenuShowAble: false,
            sub_button: []
          }
        )
      },
      addSubMenu(menu) {
        if (menu.sub_button.length == 0) {
          this.$confirm('新增子菜单会让一级菜单的内容将被清除。确定添加子菜单？', '信息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.addSubmenuInfo(menu);
          }).catch(() => {
          }) // 添加错误捕获;
        } else {
          this.addSubmenuInfo(menu);
        }
      },
      addSubmenuInfo(menu) {
        menu.sub_button.push(
          {
            level: 2,
            type: 'view',
            url: "",
            name: "新建子菜单",
          }
        )
      },
      handleEdit() {

      },
      deleteVar() {
        if (this.currentMenuInfo) {
          if(!this.currentMenuInfo.sub_button && this.currentMenuInfo.level == 2) {
            this.$confirm('您确认要删除菜单『'+this.currentMenuInfo.name +'』？', '信息', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let number = this.currentTopMenu.sub_button.indexOf(this.currentMenuInfo);
              this.currentTopMenu.sub_button.splice(number, 1);
              this.currentMenuInfo = null;
            }).catch(() => {
            }); // 添加错误捕获;
            return;
          }
          if (this.currentMenuInfo.sub_button.length > 0) {
            this.$confirm('菜单下还有子菜单，是否删除？', '信息', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let number = this.menus.indexOf(this.currentMenuInfo);
              this.menus.splice(number, 1);
              this.currentMenuInfo = null;
            }).catch(() => {
            }) // 添加错误捕获;
          } else {
            this.$confirm('您确认要删除菜单『'+this.currentMenuInfo.name +'』？', '信息', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let number = this.menus.indexOf(this.currentMenuInfo);
              this.menus.splice(number, 1);
              this.currentMenuInfo = null;
            }).catch(() => {
            }) // 添加错误捕获;
          }
        }
      },
      loadAllAccount() {
        wxAccountAll().then(res => {
          this.enums.wxAccounts = res.data;
        })
      },
      loadMenus: function (id) {
        console.log(id)
        this.currentMenuInfo = null;
        wxMenus(id).then(res => {
          console.log(res)
          if (res.success) {
            let tmpMenus = [];
            if (res.data) {
              let parse = JSON.parse(res.data.menuJson);
              tmpMenus = parse.button;
            }
            this.menus = tmpMenus;
          }
        })
      }
    }
  }
</script>

<style scoped>

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=75);
    -moz-opacity: .75;
    -khtml-opacity: .75;
    opacity: .75;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998
  }

  .pre_menu_item a {
    display: block;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    color: #616161;
    text-decoration: none
  }

  .mobile_preview .pre_menu_list {
    *zoom: 1;
    margin-left: 65px;
    margin-right: 36px
  }

  .mobile_preview_ft {
    height: 152px;
  }

  .mobile_preview_bd {
    position: relative;
    height: 393px;
    margin-left: 40px;
    margin-right: 28px;
    overflow-y: scroll;
  }

  .mobile_preview_hd .nickname {
    display: inline-block;
    font-weight: 400;
    padding-top: 120px;
    width: 122px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    font-size: 14px;
    color: #fff
  }

  .mobile_preview_hd {
    height: 150px;
    text-align: center
  }

  .mobile_preview {
    height: inherit;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 327px;
    margin-top: -425px;
    margin-left: -161px;
    z-index: 9999;
    background: transparent url(../../../assets/img/bg_mobile.png) no-repeat 0 0
  }

  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }

  .full-height > div {
    height: 100%
  }

  .custom-menu-view-con {
    width: 280px;
    height: 500px;
    position: relative;
    margin: 50px auto;
    border: 2px #e4e7ed solid;
  }

  .custom-menu-view {
    height: 100%;
    border: 1px solid #dedede;
  }

  .custom-menu-view__title {
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #ededed;
    color: #000001;
  }

  .custom-menu-view__body {
    position: absolute;
    top: 40px;
    left: 1px;
    right: 1px;
    bottom: 50px;
    background: #ededed;
    overflow: auto;
    border-bottom: 1px solid #dee5e7;
  }

  .custom-menu-view__footer {
    position: absolute;
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f7f7f7;
  }

  .custom-menu-view__footer__left {
    position: absolute;
    width: 40px;
    top: 0;
    bottom: 0;
    left: 0;
    border-right: 1px solid #dee5e7;
    background: url(../../../assets/img/keyboard.png);
    background-repeat: no-repeat;
    background-position: center;
  }

  .custom-menu-view__footer__right {
    position: absolute;
    left: 40px;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 13px;
  }

  .custom-menu-view__menu {
    height: 50px;
    line-height: 38px;
    text-align: center;
    position: relative;
    cursor: pointer;
    float: left;
  }

  .custom-menu-view__menu__sub {
    left: 4px;
    right: 4px;
    position: absolute;
    bottom: 60px;
    border: 1px solid #dee5e7;
    border-radius: 5px;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    font-size: 10px;
  }

  .custom-menu-view__menu__sub_view {
    left: 4px;
    right: 4px;
    position: absolute;
    bottom: 60px;
    border: 1px solid #dee5e7;
    border-radius: 5px;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    font-size: 10px;
    margin: 0 5px;
  }

  .custom-menu-view__menu__sub_view > li {
    border: 1px rgba(0, 0, 0, .1) solid
  }

  .custom-menu-view__menu__sub__add {

  }

  .text-ellipsis {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 1px solid #dee5e7;
    background-color: #f7f7f7;
  }


  .custom-menu-view .button__actived, .custom-menu-view .subbutton__actived {
    border: 1px solid #23b7e5 !important;
    z-index: 1;
  }

  .custom-menu-view__menu__sub li {
    position: relative;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    padding: 0;
    border-bottom: 1px solid #dee5e7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .grid-container {
    display: grid;
    grid-gap: -1px;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-template-rows: repeat(2, 100px);
  }

  .grid-container-preview {
    display: grid;
    grid-gap: -1px;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    grid-template-rows: repeat(2, 100px);
    padding-left: 60px;
    padding-right: 28px;
  }

  .cm-edit-right-header {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #dee5e7;
  }

  .pull-right {
    float: right;
  }

  .cm-edit-page {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    min-height: 300px;
    padding: 20px;
    background-color: #ebeef5;
  }

  .cm-edit-footer {
    margin-top: 10px;
    text-align: center;
  }
</style>
